<template>
  <div class="menu-container">
    <div class="subwrapper submenu">
      <ul>
        <li>
          <a href="#">综合</a>
        </li>
        <li><a href="#">关注</a></li>
        <li class="backend">
          <a href="#">后端</a>
          <div class="hover-menu">
            <el-tag v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="light" round>
              {{ item.label }}
            </el-tag>
          </div>
        </li>
        <li><a href="#">前端</a></li>
        <li><a href="#">Android</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">人工智能</a></li>
        <li><a href="#">代码人生</a></li>
        <li><a href="#">阅读</a></li>
        <li><a href="#">开发工具</a></li>
      </ul>
      <ul>
        <li class="tagmanage"><a href="#">标签管理</a></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' },
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' }
])
</script>

<style lang="scss" scoped>
.menu-container {
  height: 46px;
  display: flex;
  align-items: center;
  background-color: #fff;
  .submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      li {
        margin-right: 20px;
        a {
          color: #333;
          font-size: 14px;
          &:hover {
            color: $jjColor;
          }
          &.active {
            color: $jjColor;
          }
        }
      }
    }
  }
}
.hover-menu {
  position: absolute;
  top: 100px;
  left: 400px;
  height: 130px;
  width: 300px;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  /* 给盒子加阴影 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  display: none;
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
ul .backend a:hover ~ .hover-menu {
  opacity: 1;
  display: block;
}
.tagmanage {
  margin-right: 0 !important;
}
</style>
